<!DOCTYPE html>
<html>
<!--  Add triangle images for list -->
<script type="text/javascript">
    function tab1(){
        document.getElementById('tabText').innerHTML = "This is tab 1";
        document.getElementById('tab1Image').src = "images/tab1Opened.png";
        document.getElementById('tab2Image').src = "images/tab2Closed.png";
        document.getElementById('tab3Image').src = "images/tab3Closed.png";
    }
    function tab2(){
        document.getElementById('tabText').innerHTML = "This is tab 2";
        document.getElementById('tab1Image').src = "images/tab1Closed.png";
        document.getElementById('tab2Image').src = "images/tab2Opened.png";
        document.getElementById('tab3Image').src = "images/tab3Closed.png";
    }
    function tab3(){
        document.getElementById('tabText').innerHTML = "This is tab 3";
        document.getElementById('tab1Image').src = "images/tab1Closed.png";
        document.getElementById('tab2Image').src = "images/tab2Closed.png";
        document.getElementById('tab3Image').src = "images/tab3Opened.png";
    }
    function page1(){
        if (document.getElementById('page1_1').style.display == "none" && document.getElementById('page1_2').style.display == "none"){
            document.getElementById('page1_1').style.display = "block";
            document.getElementById('page1_2').style.display = "block";
            document.getElementById('ulPage1').style.display = "block";

        }
        else
        if (document.getElementById('page1_1').style.display == "block" && document.getElementById('page1_2').style.display == "block"){
            document.getElementById('page1_1').style.display = "none";
            document.getElementById('page1_2').style.display = "none";
            document.getElementById('ulPage1').style.display = "none";
        }

    }
    function page1_2(){
        if (document.getElementById('page1_2_1').style.display == "none"){
            document.getElementById('page1_2_1').style.display = "block";
            document.getElementById('ulPage1_2').style.display = "block";
        }
        else
        if (document.getElementById('page1_2_1').style.display == "block"){
            document.getElementById('page1_2_1').style.display = "none";
            document.getElementById('ulPage1_2').style.display = "none";
        }
    }
    function page2(){
        if (document.getElementById('page2_1').style.display == "none"){
            document.getElementById('page2_1').style.display = "block";
            document.getElementById('ulPage2').style.display = "block";
        }
        else
        if (document.getElementById('page2_1').style.display == "block"){
            document.getElementById('page2_1').style.display = "none";
            document.getElementById('ulPage2').style.display = "none";
        }
    }
</script>

<head lang="en">
    <meta charset="UTF-8">
    <title>Lab 1 Perebykivskiy 343</title>
    <link rel="stylesheet" href="css/styles.css" type="text/css"/>
</head>
<body>
    <div id="main" style="height: 100%">
        <div id="header">
            <table border="1" bgcolor="#f0f8ff" width="100%">
                <tr>
                    <td width="80%" id="advBanner"><img src="images/2.jpg" width="100%" height="100"></td>
                    <td width="20%" id="search">
                        <table border="0" class="search" bgcolor="#faebd7" width="100%">
                            <tr>
                                <td><input type="text" placeholder="Search text"></td>
                                <td align="right"><input type="button" class="btn"></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </div>
        <div id="workspace" style="background: red;">
            <table border="1" bgcolor="aqua" width="100%">
                <tr >
                    <td id="menu" width="15%" style="vertical-align: top;" height="100%">
                        <ul>
                            <li onclick="page1()" style="cursor:pointer">Page 1</li>
                            <ul style="display: none" id="ulPage1">
                                <li id="page1_1" style="display: none">Page 1_1</li>
                                <li id="page1_2" style="display: none; cursor: pointer" onclick="page1_2()">Page 1_2</li>
                                <ul style="display: none" id="ulPage1_2">
                                    <li id="page1_2_1" style="display: none">Page 1_2_1</li>
                                </ul>
                            </ul>
                            <li onclick="page2()" style="cursor:pointer;">Page 2
                            <ul  id="ulPage2">
                                <li id="page2_1" style="display: none">Page 2_1</li>
                            </ul>
                            </li>
                            <li>Page 3</li>
                            <li>Page 4</li>
                            <li>Page 5</li>
                        </ul>
                    </td>
                    <td id="profile" width="80%">
                        <table border="0" id="profileHeader" class="profile" bgcolor="#7fffd4">
                            <tr>
                                <td id="photo" rowspan="2"><img src="images/22.jpg" width="120" height="120"></td>
                                <td style="padding-left: 125px"><h1>Name</h1></td>
                            </tr>
                            <tr>
                                <td align="right"><h1>Price</h1></td>
                            </tr>

                        </table>
                        <table border="0" id="profileTabs" bgcolor="#f0ffff">
                            <tr>
                                <td id="tab1"><a href="#"><img src="images/tab1Closed.png" id="tab1Image" width="90" height="40" onclick="tab1()"></a></td>
                                <td id="tab2"><a href="#"><img src="images/tab2Closed.png" id="tab2Image" width="90" height="40" onclick="tab2()"></a></td>
                                <td id="tab3"><a href="#"><img src="images/tab3Closed.png" id="tab3Image" width="90" height="40" onclick="tab3()"></a></td>
                            </tr>
                        </table>
                        <div style="border: dashed; height: 100%">
                            <h1 id="tabText">Random text</h1>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
<ul>
    <li>123</li>
    <ul>
        <li>345</li>
    </ul>
</ul>
</body>
</html>